<template>
  <div class="index-container">
    <!-- 头部区域 -->
    <header class="header">
      <!-- 收货地区选择 -->
      <div class="soubg">
        <div class="sou">
          <div class="s_city_b">
            <span class="fl">送货至：</span>
            <div class="s_city">
              <span>四川</span>
              <div class="s_city_bg" v-if="showCitySelect">
                <div class="s_city_t"></div>
                <div class="s_city_c">
                  <h2>请选择所在的收货地区</h2>
                  <table border="0" class="c_tab">
                    <tbody>
                      <tr><th>A</th><td class="c_h"><span>安徽</span><span>澳门</span></td></tr>
                      <tr><th>B</th><td class="c_h"><span>北京</span></td></tr>
                      <tr><th>C</th><td class="c_h"><span>重庆</span></td></tr>
                      <tr><th>F</th><td class="c_h"><span>福建</span></td></tr>
                      <tr><th>G</th><td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td></tr>
                      <tr><th>H</th><td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td></tr>
                      <tr><th>J</th><td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td></tr>
                      <tr><th>L</th><td class="c_h"><span>辽宁</span></td></tr>
                      <tr><th>N</th><td class="c_h"><span>内蒙古</span><span>宁夏</span></td></tr>
                      <tr><th>Q</th><td class="c_h"><span>青海</span></td></tr>
                      <tr><th>S</th><td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td></tr>
                      <tr><th>T</th><td class="c_h"><span>台湾</span><span>天津</span></td></tr>
                      <tr><th>X</th><td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td></tr>
                      <tr><th>Y</th><td class="c_h"><span>云南</span></td></tr>
                      <tr><th>Z</th><td class="c_h"><span>浙江</span></td></tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="fr">
            <span class="fl">你好，请<a href="#/login">登录</a>&nbsp; <a href="#/regist" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#/orders">我的订单</a>&nbsp;|</span>
            <span class="ss">
              <div class="ss_list">
                <a href="#">收藏夹</a>
                <div class="ss_list_bg" v-if="showFavorites">
                  <div class="s_city_t"></div>
                  <div class="ss_list_c">
                    <ul>
                      <li><a href="#">我的收藏夹</a></li>
                      <li><a href="#">我的收藏夹</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="ss_list">
                <a href="#">客户服务</a>
                <div class="ss_list_bg" v-if="showCustomerService">
                  <div class="s_city_t"></div>
                  <div class="ss_list_c">
                    <ul>
                      <li><a href="#">客户服务</a></li>
                      <li><a href="#">客户服务</a></li>
                      <li><a href="#">客户服务</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="ss_list">
                <a href="#">网站导航</a>
                <div class="ss_list_bg" v-if="showSiteNavigation">
                  <div class="s_city_t"></div>
                  <div class="ss_list_c">
                    <ul>
                      <li><a href="#">网站导航</a></li>
                      <li><a href="#">网站导航</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="/images/s_tel.png" align="absmiddle" /></a></span>
          </div>
        </div>
      </div>

      <!-- Logo、搜索框、购物车 -->
      <div class="top">
        <div class="logo"><a href="#/"><img src="/images/logo.png" alt="易买网" /></a></div>
        <div class="search">
          <form>
            <input type="text" placeholder="搜索商品..." class="s_ipt" />
            <input type="submit" value="搜索" class="s_btn" />
          </form>
          <div class="hot-keywords">
            <a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a>
          </div>
        </div>
        <div class="i_car" @mouseenter="showCart=true" @mouseleave="showCart=false">
          <div class="car_t">购物车 [ <span>3</span> ]</div>
          <div class="car_bg" v-if="showCart">
            <div v-if="!isLogin" class="un_login">还未登录！<a href="#/login" style="color:#ff4e00;">马上登录</a> 查看购物车！</div>
            <div v-else>
              <ul class="cars">
                <li v-for="item in cartItems" :key="item.id">
                  <div class="img"><a href="#"><img :src="item.image" width="58" height="58" /></a></div>
                  <div class="name"><a href="#">{{ item.name }}</a></div>
                  <div class="price"><font color="#ff4e00">￥{{ item.price }}</font> X{{ item.quantity }}</div>
                </li>
              </ul>
              <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>{{ totalPrice }}</span></div>
              <div class="price_a"><a href="#/cart">去购物车结算</a></div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 导航菜单 -->
    <div class="menu_bg">
      <div class="menu">
        <div class="nav">
          <div class="nav_t">全部商品分类</div>
          <div class="leftNav">
            <ul>
              <li v-for="category in categories" :key="category.id" @mouseenter="showCategory=category.id" @mouseleave="showCategory=null">
                <div class="fj">
                  <span class="n_img"><span></span><img :src="category.icon" /></span>
                  <span class="fl">{{ category.name }}</span>
                </div>
                <div class="zj" v-if="showCategory===category.id" :style="{ top: category.topOffset }">
                  <div class="zj_l">
                    <div class="zj_l_c" v-for="subcategory in category.subcategories" :key="subcategory.id">
                      <h2>{{ subcategory.name }}</h2>
                      <span v-for="item in subcategory.items" :key="item.id"><a href="#">{{ item.name }}</a>|</span>
                    </div>
                  </div>
                  <div class="zj_r">
                    <a href="#"><img :src="category.banner1" width="236" height="200" /></a>
                    <a href="#"><img :src="category.banner2" width="236" height="200" /></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <ul class="menu_r">
          <li><a href="#/">首页</a></li>
          <li><a href="#/food">美食</a></li>
          <li><a href="#/fresh">生鲜</a></li>
          <li><a href="#/home-decoration">家居</a></li>
          <li><a href="#/suit-dress">女装</a></li>
          <li><a href="#/makeup">美妆</a></li>
          <li><a href="#/digital">数码</a></li>
          <li><a href="#/group-buying">团购</a></li>
        </ul>
        <div class="m_ad">中秋送好礼！</div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="i_bg bg_color">
      <div class="i_ban_bg">
	<div class="banner">    	
            <div class="top_slide_wrap">
                <ul class="slide_box bxslider">
                    <li><img src="images/ban1.jpg" width="740" height="401" /></li>
                    <li><img src="images/ban1.jpg" width="740" height="401" /></li> 
                    <li><img src="images/ban1.jpg" width="740" height="401" /></li> 
                </ul>	
                <div class="op_btns clearfix">
                    <a href="#" class="op_btn op_prev"><span></span></a>
                    <a href="#" class="op_btn op_next"><span></span></a>
                </div>        
            </div>
        </div>

        <!-- 新闻资讯和话费充值 -->
        <div class="inews">
          <div class="news_t">
            <span class="fr"><a href="#">更多 ></a></span>新闻资讯
          </div>
          <ul>
            <li v-for="news in newsList" :key="news.id"><span>[ {{ news.type }} ]</span><a href="#">{{ news.title }}</a></li>
          </ul>
          <div class="charge_t">
            话费充值<div class="ch_t_icon"></div>
          </div>
          <form>
            <table border="0">
              <tbody>
                <tr height="35">
                  <td width="33">号码</td>
                  <td><input type="text" placeholder="请输入手机号码" class="c_ipt" /></td>
                </tr>
                <tr height="35">
                  <td>面值</td>
                  <td>
                    <select class="jj" name="city">
                      <option value="0" selected="selected">100元</option>
                      <option value="1">50元</option>
                      <option value="2">30元</option>
                      <option value="3">20元</option>
                      <option value="4">10元</option>
                    </select>
                    <span style="color:#ff4e00; font-size:14px;">￥99.5</span>
                  </td>
                </tr>
                <tr height="35">
                  <td colspan="2"><input type="submit" value="立即充值" class="c_btn" /></td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
      </div>

      <!-- 热门商品 -->
      <div class="content mar_10">
        <div class="h_l_img">
          <div class="img"><img src="/images/l_img.jpg" width="188" height="188" /></div>
          <div class="pri_bg">
            <span class="price fl">￥53.00</span>
            <span class="fr">16R</span>
          </div>
        </div>

        <div class="hot_pro">
          <div id="featureContainer">
            <div id="feature">
              <div id="block">
                <div id="botton-scroll">
                  <ul class="featureUL">
                    <li class="featureBox" v-for="(product, index) in hotProducts" :key="product.id" v-show="index >= currentHotProductIndex && index < currentHotProductIndex + 4">
                      <div class="box">
                        <div class="h_icon"><img src="/images/hot.png" width="50" height="50" /></div>
                        <div class="imgbg">
                          <a href="#"><img :src="product.image" width="160" height="136" /></a>
                        </div>
                        <div class="name">
                          <a href="#">
                            <h2>{{ product.brand }}</h2>
                            {{ product.name }}
                          </a>
                        </div>
                        <div class="price">
                          <font>￥<span>{{ product.price }}</span></font> &nbsp; {{ product.rebate }}R
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <a class="h_prev" href="javascript:void();" @click="prevHotProduct">Previous</a>
              <a class="h_next" href="javascript:void();" @click="nextHotProduct">Next</a>
            </div>
          </div>
        </div>
      </div>

      <!-- 限时特卖 -->
      <div class="i_t mar_10">
        <span class="fl">限时特卖</span>
        <span class="i_mores fr"><a href="#">更多</a></span>
      </div>
      <div class="content">
        <div class="i_sell">
          <div id="imgPlay">
            <ul class="imgs" id="actor">
              <li v-for="(flashBanner, index) in flashSaleBanners" :key="flashBanner.id" v-show="currentFlashBannerIndex === index">
                <a href="#"><img :src="flashBanner.image" width="211" height="357" /></a>
              </li>
            </ul>
            <div class="previ" @click="prevFlashBanner">上一张</div>
            <div class="nexti" @click="nextFlashBanner">下一张</div>
          </div>
        </div>
        <div class="sell_right">
          <div class="sell_1" v-for="product in flashSaleProducts" :key="product.id">
            <div class="s_img"><a href="#"><img :src="product.image" width="185" height="155" /></a></div>
            <div class="s_price">￥<span>{{ product.price }}</span></div>
            <div class="s_name">
              <h2><a href="#">{{ product.name }}</a></h2>
              倒计时：<span>{{ product.hours }}</span> 时 <span>{{ product.minutes }}</span> 分 <span>{{ product.seconds }}</span> 秒
            </div>
          </div>
        </div>
      </div>

      <!-- 进口生鲜区 -->
      <div class="i_t mar_10">
        <span class="floor_num">1F</span>
        <span class="fl">进口 <b>·</b> 生鲜</span>
        <span class="i_mores fr"><a href="#">进口咖啡</a>&nbsp; &nbsp; &nbsp; <a href="#">进口酒</a>&nbsp; &nbsp; &nbsp; <a href="#">进口母婴</a>&nbsp; &nbsp; &nbsp; <a href="#">新鲜蔬菜</a>&nbsp; &nbsp; &nbsp; <a href="#">新鲜水果</a></span>
      </div>
      <div class="content">
        <div class="fresh_left">
          <div class="fre_ban">
            <div id="imgPlay1">
              <ul class="imgs" id="actor1">
                <li v-for="(banner, index) in freshBanners" :key="banner.id" v-show="currentFreshBannerIndex === index">
                <a href="#"><img :src="banner.image" width="211" height="286" /></a>
                </li>
              </ul>
              <div class="prevf" @click="prevFreshBanner">上一张</div>
              <div class="nextf" @click="nextFreshBanner">下一张</div>
            </div>
          </div>
          <div class="fresh_txt">
            <div class="fresh_txt_c">
              <a href="#">进口水果</a><a href="#">奇异果</a><a href="#">西柚</a><a href="#">海鲜水产</a><a href="#">品质牛肉</a><a href="#">奶粉</a><a href="#">鲜活禽蛋</a><a href="#">进口酒</a>
            </div>
          </div>
        </div>
        <div class="fresh_mid">
          <ul>
            <li v-for="product in freshProducts" :key="product.id">
              <div class="name"><a href="#">{{ product.name }}</a></div>
              <div class="price">
                <font>￥<span>{{ product.price }}</span></font> &nbsp; {{ product.rebate }}R
              </div>
              <div class="img"><a href="#"><img :src="product.image" width="185" height="155" /></a></div>
            </li>
          </ul>
        </div>
        <div class="fresh_right">
          <ul>
            <li v-for="banner in freshRightBanners" :key="banner.id"><a href="#"><img :src="banner.image" width="260" height="220" /></a></li>
          </ul>
        </div>
      </div>

      <!-- 食品饮料区 -->
      <div class="i_t mar_10">
        <span class="floor_num">2F</span>
        <span class="fl">食品饮料</span>
        <span class="i_mores fr"><a href="#">咖啡</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">休闲零食</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">饼干糕点</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">冲饮谷物</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">营养保健</a></span>
      </div>
      <div class="content">
        <!-- 食品饮料区内容省略 -->
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <!-- 页脚内容省略 -->
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 状态管理
const showCitySelect = ref(false);
const showCart = ref(false);
const showCategory = ref(null);
const showFavorites = ref(false);
const showCustomerService = ref(false);
const showSiteNavigation = ref(false);
const isLogin = ref(false);
const currentBannerIndex = ref(0);
const currentFlashBannerIndex = ref(0);
const currentFreshBannerIndex = ref(0);
const currentHotProductIndex = ref(0);

// 模拟数据
const cartItems = ref([
  {
    id: 1,
    name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
    price: 399,
    quantity: 1,
    image: '/images/car1.jpg'
  },
  {
    id: 2,
    name: '香奈儿（Chanel）邂逅活力淡香水50ml',
    price: 399,
    quantity: 1,
    image: '/images/car2.jpg'
  },
  {
    id: 3,
    name: '香奈儿（Chanel）邂逅活力淡香水50ml',
    price: 399,
    quantity: 1,
    image: '/images/car2.jpg'
  }
]);

const totalPrice = ref(cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0));

const categories = ref([
  {
    id: 1,
    name: '进口食品、生鲜',
    icon: '/images/nav1.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '食品、饮料、酒',
    icon: '/images/nav2.png',
    topOffset: '-40px',
    subcategories: [
      {
        id: 21,
        name: '零食 / 糖果 / 巧克力2',
        items: [
          { id: 211, name: '坚果' },
          { id: 212, name: '蜜饯' },
          { id: 213, name: '红枣' },
          { id: 214, name: '牛肉干' },
          { id: 215, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 3,
    name: '母婴、玩具、童装',
    icon: 'images/nav3.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 4,
    name: '家具、家庭清洁、纸品',
    icon: 'images/nav4.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 5,
    name: '美妆、个人护理、洗护',
    icon: 'images/nav5.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 6,
    name: '女装、内衣、中老年',
    icon: 'images/nav6.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 7,
    name: '鞋靴、箱包、腕表配饰',
    icon: 'images/nav7.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 8,
    name: '男装、运动',
    icon: 'images/nav8.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 9,
    name: '手机、小家电、电脑',
    icon: 'images/nav9.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
  {
    id: 10,
    name: '礼品、充值',
    icon: 'images/nav10.png',
    topOffset: '0px',
    subcategories: [
      {
        id: 11,
        name: '零食 / 糖果 / 巧克力',
        items: [
          { id: 111, name: '坚果' },
          { id: 112, name: '蜜饯' },
          { id: 113, name: '红枣' },
          { id: 114, name: '牛肉干' },
          { id: 115, name: '巧克力' }
        ]
      }
    ]
  },
]);

const banners = ref([
  { id: 1, image: '/images/ban1.jpg' },
  { id: 2, image: '/images/ban1.jpg' },
  { id: 3, image: '/images/ban1.jpg' }
]);

const newsList = ref([]);

// 获取新闻资讯数据
const fetchNewsList = async () => {
  try {
    const response = await axios.get('/api/news/list');
    newsList.value = response.data;
  } catch (error) {
    console.error('获取新闻资讯失败:', error);
    // 失败时显示空白
    newsList.value = [];
  }
};

const hotProducts = ref([
  {
    id: 1,
    name: '德亚全脂纯牛奶200ml*48盒',
    brand: '德国进口',
    price: 189,
    rebate: 26,
    image: '/images/hot1.jpg'
  },
  {
    id: 2,
    name: 'Apple/苹果 iPhone 6s Plus公开版',
    brand: 'iphone 6S',
    price: 5288,
    rebate: 25,
    image: '/images/hot2.jpg'
  }
]);

const flashSaleBanners = ref([
  { id: 1, image: '/images/tm_r.jpg' },
  { id: 2, image: '/images/tm_r.jpg' },
  { id: 3, image: '/images/tm_r.jpg' }
]);

const flashSaleProducts = ref([
  {
    id: 1,
    name: '沙宣洗发水',
    price: 89,
    hours: 1200,
    minutes: 30,
    seconds: 28,
    image: '/images/tm_1.jpg'
  }
]);

const freshBanners = ref([
  { id: 1, image: '/images/fre_r.jpg' },
  { id: 2, image: '/images/fre_r.jpg' },
  { id: 3, image: '/images/fre_r.jpg' }
]);

const freshProducts = ref([
  {
    id: 1,
    name: '新鲜美味 进口美食',
    price: 198,
    rebate: 26,
    image: '/images/fre_1.jpg'
  }
]);

const freshRightBanners = ref([
  { id: 1, image: '/images/fre_b1.jpg' },
  { id: 2, image: '/images/fre_b2.jpg' }
]);

// 轮播图控制函数
const prevBanner = () => {
  currentBannerIndex.value = (currentBannerIndex.value - 1 + banners.value.length) % banners.value.length;
};

const nextBanner = () => {
  currentBannerIndex.value = (currentBannerIndex.value + 1) % banners.value.length;
};

const prevFlashBanner = () => {
  currentFlashBannerIndex.value = (currentFlashBannerIndex.value - 1 + flashSaleBanners.value.length) % flashSaleBanners.value.length;
};

const nextFlashBanner = () => {
  currentFlashBannerIndex.value = (currentFlashBannerIndex.value + 1) % flashSaleBanners.value.length;
};

const prevFreshBanner = () => {
  currentFreshBannerIndex.value = (currentFreshBannerIndex.value - 1 + freshBanners.value.length) % freshBanners.value.length;
};

const nextFreshBanner = () => {
  currentFreshBannerIndex.value = (currentFreshBannerIndex.value + 1) % freshBanners.value.length;
};

const prevHotProduct = () => {
  currentHotProductIndex.value = Math.max(0, currentHotProductIndex.value - 1);
};

const nextHotProduct = () => {
  currentHotProductIndex.value = Math.min(hotProducts.value.length - 1, currentHotProductIndex.value + 1);
};

// 页面加载时执行
onMounted(() => {
  // 获取新闻资讯数据
  fetchNewsList();
  
  // 模拟轮播图自动播放
  const bannerInterval = setInterval(() => {
    nextBanner();
  }, 5000);

  // 清理定时器
  return () => clearInterval(bannerInterval);
});
</script>

<style scoped>
/* 这里引入或编写样式 */
@import url('@/assets/style.css');

/* 可以添加额外的Vue组件样式 */
.index-container {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
}

/* 头部样式 */
.header {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 导航菜单样式 */
.menu_bg {
  background-color: #ff4e00;
  height: 40px;
}

.menu {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* 其他样式省略，实际项目中需要根据HTML原型完整实现 */
</style>